<template>
  <view class="pages" scroll-y>
    <image class="image" :lazy-load='true' v-for="(item,index) in this.sum" :src="ossDomain + '/qiyi/qiyi-img'+(index+1)+'.webp'" mode="widthFix"></image>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        scrollTop: 0,
        sum: 0,
        interval: null
      }
    },
    onLoad(e) {
      this.lazyLoad()
    },
    methods: {
      lazyLoad () {
        this.interval = setInterval(()=>{
          this.sum++
          if (this.sum == 26) {
            clearInterval(this.interval)
          }
          console.log(this.sum);
        },100)
      },
    },
    onPageScroll({scrollTop}) {
      // console.log(scrollTop);
        // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
        this.scrollTop = scrollTop;
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    width: 100vw;
    height: 100vh;
    .image{
      width: 100%;
      height: 200px;
      display: block;
    }
  }
</style>
